<template>
  <Crumbs :title="'支付订单'" />
  <el-card shadow="hover" class="box-card">
    <h2 class="o-h2">可使用优惠卷</h2>
    <el-radio-group
      @change="OrCoupon"
      v-model="radio"
      size="large"
      class="radio-group"
    >
      <el-radio-button label="OrCoupon">
        <template #default>
          <div class="radioDiv coupon">
            <div class="radioDiv2">
              <img class="gx" src="@\assets\icons\Rectangle.svg" />
              <p class="o-title">满300减50</p>
              <p class="p-00014">有效时间：2022-07-01</p>
            </div>
          </div>
        </template>
      </el-radio-button>
    </el-radio-group>
    <el-divider border-style="dashed" />

    <h2 class="o-h2">
      Payment Methods
      <span class="p-22214">All transactions are secure and encrypted.</span>
    </h2>

    <el-radio-group
      @change="OrRadio"
      v-model="radio1"
      size="large"
      class="radio-group"
    >
      <el-radio-button label="Wire Transfer">
        <template #default>
          <div class="radioDiv">
            <img src="@\assets\icons\or4.svg" alt="" srcset="" />
            <img class="gx" src="@\assets\icons\Rectangle.svg" />

            <div class="radioDiv2">
              <p class="o-title">Wire Transfer</p>
              <span class="p-00014">(Get More 3.5% OFF)</span>
            </div>
          </div>
        </template>
      </el-radio-button>
      <el-radio-button label="Paypal">
        <template #default>
          <div class="radioDiv">
            <img src="@\assets\icons\or3.svg" alt="" srcset="" />
            <img class="gx" src="@\assets\icons\Rectangle.svg" />
            <div class="radioDiv2">
              <p class="o-title">Paypal</p>
            </div>
          </div>
        </template>
      </el-radio-button>
      <el-radio-button label="Pay with Card">
        <template #default>
          <div class="radioDiv">
            <img src="@\assets\icons\or2.svg" alt="" srcset="" />
            <img class="gx" src="@\assets\icons\Rectangle.svg" />
            <div class="radioDiv2">
              <p class="o-title">Pay with Card</p>
            </div>
          </div>
        </template>
      </el-radio-button>
      <el-radio-button label="Pay with Balance">
        <template #default>
          <div class="radioDiv">
            <img src="@\assets\icons\or1.svg" alt="" srcset="" />
            <img class="gx" src="@\assets\icons\Rectangle.svg" />

            <div class="radioDiv2">
              <p class="o-title">Pay with Balance</p>
            </div>
          </div>
        </template>
      </el-radio-button>
    </el-radio-group>

    <el-divider border-style="dashed" />

    <el-row class="mb-4">
      <div>
        <div class="p-22220">250.00 USD</div>
        <div class="p-22214">
          <strike>300.00 USD </strike>(已优惠<span class="t-red14"
            >50.00 USD</span
          >)
        </div>
      </div>

      <el-button type="danger">Checkout</el-button>
    </el-row>
  </el-card>
</template>
<script lang="ts" setup>
import Crumbs from "@/components/Crumbs/index.vue";
import { ref } from "vue";

const radio = ref("OrCoupon");
const radio1 = ref("Pay with Card");
const OrCoupon = () => {
  console.log(radio1.value);
};
const OrRadio = () => {
  console.log(radio1.value);
};
</script>
<style lang="scss" scoped>
.box-card {
  padding: 10px;
  .o-h2 {
    margin: 10px 0;
  }
  .mb-4 {
    justify-content: space-between;
  }
  ::v-deep .el-radio-button--large .el-radio-button__inner {
    border: 1px solid var(--unnamed, #dfe2e6);
    box-shadow: none;
    border-radius: 4px;
    padding: 0;
  }
  .el-radio-group {
    width: 100%;
    justify-content: space-between;
  }
  .coupon {
    width: auto !important;
    .radioDiv2 {
      text-align: center !important;
      margin-left: 0 !important;
    }
  }
  .radioDiv {
    display: flex;
    align-items: center;
    width: 247px;
    height: 79px;
    padding: 20px;
    position: relative;

    .radioDiv2 {
      text-align: left;
      margin-left: 15px;
    }
    .gx {
      position: absolute;
      bottom: 0;
      right: 0;
      display: none;
    }
  }
}
::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner {
  background: transparent !important;
  border: 1px solid var(--unnamed, #bc1f22);
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}
::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner {
  .gx {
    display: block !important;
  }
}
</style>
